<template id='addDriverSu'>
  <f7-page>
    <f7-navbar title="添加车辆" back-link="返回">
    </f7-navbar>

    <f7-list>
    <f7-list-item smart-select title="选择分组">
      <select name="fruits" v-model="newCar.group_id">
        <option :value="v._id" v-for="v in driverGroup">{{v.name}}</option>
      </select>
    </f7-list-item>
    <f7-list-item>
      <label>车牌号</label>
      <input type='text' v-model='newCar.number' />
    </f7-list-item>
    <f7-list-item>
      <label>手机号</label>
      <input type="number" placeholder="请输入"  v-model.number="newCar.phone" />
    </f7-list-item>
    <f7-list-item>
      <label>姓名</label>
      <input type="text" placeholder="请输入"  v-model="newCar.real_name"/>
    </f7-list-item>
    <f7-list-item>
      <label>载重量</label>
      <input type="number" placeholder="请输入"  v-model.number="newCar.weight"/>
    </f7-list-item>
    <f7-list-item title="运输种类"></f7-list-item>
    <f7-list-item>
        <div v-for="(v,k) in productTodo" >
          <input type="checkbox" :value="v.eng" v-model="newCar.transport">
          <label>{{v.chn}}</label>
        </div>
    </f7-list-item>

    <f7-list-button class="bar bar-royal">
        <h1 class="title" @click="submit">确认添加</h1>
    </f7-list-button>
    <f7-list-item>
      <b>{{newCar}}</b>
    </f7-list-item>

    </f7-list>

  </f7-page>
</template>

<script>
  export default {
      name: 'addDriverSu',
      data: function () {
          return {
              seleCar: '',
              passtoto:[],
              newCar:{
                  group_id:'',
                  number:'',
                  phone:'',
                  weight:'',
                  transport:[],
                  real_name:''
              },
              productTodo:'',
              driverGroup: ''
          }
      },
      components: {
      },
      methods: {
        async getProductClassify () {
          this.productTodo = (await this.mineService.getProductClassify({type: 'registered'})).data.data
        },
        async getListGroup(){
          this.driverGroup=(await this.mineService.getListGroup({type: "DRIVER" })).data.data
        },
        async submit(){
          var flag=true;

          //交验数据
          if(!this.newCar.number || !this.newCar.phone || !this.newCar.weight || this.newCar.transport.length==0 || !this.newCar.real_name){
            flag=false;
            alert('参数有误')
          }
          if(this.newCar.number.length!==7 || String(this.newCar.phone).length !== 11){
            flag=false;
            alert('参数不标准')
          }
          if(flag){

            this.submit=(await this.mineService.trafficAdminAddUserTruck(this.newCar)).data;
            if(this.submit.status=='err'){
              alert(this.submit.msg)
            }else if(this.submit.status=='success'){
              alert('添加成功')
            }else{
              alert('其他故障')
            }
          }

        }
      },
      mounted () {
        this.getProductClassify()
        this.getListGroup()
      }
  }

</script>
<style scoped>

  .row {
    margin: 0px 10px;
  }

  .col-25 {
    float: left;
    text-align: center;
    position: relative;
    margin-bottom: 25px;
  }

  i.f7-icons {
    display: inherit;
    height: 30px;
  }

  .text-gray {
    font-family: verdana, 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    font-weight: 400;
    margin-top: 7px;
    font-size: 12px;
  }

  .text-purple {
    color: #a3a2f0;
  }

  .ios .navbar .right {
    margin-left: 10px;
    color: #fff;
    font-size: 14px;
  }

  .bg-master {
    position: relative;
    background: url('../../assets/img/bg-master.jpg') no-repeat center -53px;
    background-size: 100% 150px;
    padding-bottom: 15px;
  }

  .bg-master h2 {
    color: #fff;
    font-size: 20px;
    white-space: normal;
    display: inherit;
    padding: 12px 0 9px 24px;
    margin: 0;
  }

  .bg-master h4 {
    color: #fff;
    font-size: 12px;
    white-space: normal;
    display: inherit;
    padding: 0px 0 30px 24px;
    margin: 0;
  }

  .role-icon {
    vertical-align: middle;
    background: #9db7ff;
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 10px;
  }

  .logo-icon {
    position: absolute;
    right: 24px;
    top: 9px;
    width: 80px;
    height: 80px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    background: #f0f0f0;
  }

  .logo-icons {
    width: 48px;
    height: 48px;
    border-radius: 100%;
  }

  .ios .card {
    margin: 0 24px 20px 24px;
    padding: 10px 10px;
    border-radius: 5px;
  }

  .text-center_tite {
    font-size: 16px;
    color: #333;
  }

  .text-center_footer {
    font-size: 12px;
    color: #666;
  }

  .text-center_footer span {
    margin-right: 3px;
  }

  .ios .card-header,
  .ios .card-footer {
    min-height: 40px;
    padding: 0px 15px;
    position: initial;
  }

  .item-face {
    position: absolute;
    right: 15px;
    top: 5px;
  }

  .text-gray2 {
    color: #e5e5e5;
    font-size: 12px;
    display: inherit;
  }

  .ios .list {
    margin: 0;
  }

  .ios .page {
    background: #fff;
  }

</style>
